Vue3实现百度地图可视化 |
您所在的位置：网站首页 › echarts 封装 › Vue3实现百度地图可视化 |
Vue3实现百度地图可视化
|
1、写在前面
Hello！这篇笔记将会介绍如何在Vue3.0框架中导入地图，通过vue-echarts展现。 2、基本步骤 vue-cli创建Vue3.0项目 安装echarts & vue-echarts插件 获取ak 对接地图（引入地图的扩展bmap，bmap中添加属性）好啦，了解了基本步骤后，我们就开始吧！上车了，出发！ 3、安装echarts & vue-echarts插件1、安装echarts和vue-echarts插件：npm install echarts vue-echarts 1.1：Q：为什么要使用vue-echarts插件？ A: 使用vue-echarts插件后，不用像echarts绘制图表时要document.getElementById()获取画布的DOM元素和调用init()方法初始化，插件封装后在一定程度上进行了简化。 2、main.js中引入 & 注册 echarts 和 vue-echarts插件，在项目入口文件中进行全局导入。 import { createApp } from 'vue' import App from './App.vue' // 引入 echarts import * as echarts from 'echarts' import VueECharts from 'vue-echarts' const app = createApp(App); // 全局挂载 echarts app.config.globalProperties.$echarts = echarts app.component('v-chart', VueECharts); app.mount('#app'); 4、获取ak在后面的一个步骤中，我们要在项目中对接百度api的接口，这个api接口的参数部分包含了一个叫ak的参数，我们要首先获取到这个ak值才能对接上百度的接口。 1、访问地址：lbsyun.baidu.com/ 2、顶部tab栏点击【控制台】，点击后需要进行注册，注册完成后登录。
1、配置地图api接口，public/index.html ，url两个参数，参数v最好写3.0，参数ak就是我们创建应用生成的ak。 https://api.map.baidu.com/api?v=3.0&ak=[akvalue]
import 'echarts/extension/bmap/bmap'; 3、配置bmap：bmap我配置了3个地图属性center、zoom、roam 4、style中的优化：定制画布大小 & 去掉左下角地图logo和连接 代码： import { reactive } from "vue"; // 引入地图的扩展 import "echarts/extension/bmap/bmap"; export default { name: "App", setup() { const options = reactive({ bmap: { // 地图中心点（经纬度） center: [104, 38], // 缩放比例 zoom: 5, // 是否允许缩放 roam: false, }, }); return { options }; }, }; .ec-extension-bmap { margin: 20px; width: 840px !important; height: 680px !important; } .anchorBL { display: none; } 6、写在最后OK！到这里，相信地图就绘制完成拉！图表每每成功展示在项目中后，都会有一丢丢的小激动，bmap还有更多的属性（mapStyle...）等待探索。 后面还可以基于该地图进一步的定制渲染或集成ECharts图表（例如地图 + 散点图展示各地市某产品销量大盘等需求）进行更复杂的定制化开发。 此章作为基础篇，如有任何问题随时分享，一起共同进步。 |
【本文地址】
今日新闻 |
推荐新闻 |